<script setup>
import { ref, onMounted } from 'vue'
const navList = ref([
  {
    title: '上游',
    types: [
      {
        type: '材料',
        classify: {
          复核材料轻量化: 0
        }
      },
      {
        type: '硬件组件',
        classify: {
          整机设计: 5,
          传感器: 0,
          电池与动力系统: 0
        }
      },
      {
        type: '软件技术',
        classify: {
          飞控系统: 1,
          通信与导航设施: 0
        }
      }
    ]
  },
  {
    title: '中游',
    types: [
      {
        type: '总装集成',
        classify: {
          直升机: 0,
          无人机: 5,
          'eVTOL(电动垂直起降飞行器)': 0
        }
      }
    ]
  },
  {
    title: '下游',
    types: [
      {
        type: '新型基础设施',
        classify: {
          地面系统: 2,
          通导遥: 1,
          起降设施: 0,
          空管系统: 0
        }
      },
      {
        type: '运营及服务',
        classify: {
          运营分成: 5,
          飞行培训: 6,
          服务咨询: 1,
          整机销售: 8
        }
      },
      {
        type: '空中飞行保障',
        classify: {
          飞行保障: 0,
          低空服务平台: 1,
          无人机反制: 0,
          空中交通管制服务: 0
        }
      },
      {
        type: '应用场景',
        classify: {
          物流: 3,
          旅游: 6,
          '农业植保、应急救援、巡检、消防': 1,
          智慧城市: 0
        }
      }
    ]
  }
])
const navbar = ref(navList.value[2].title)
let companys = ref(navList.value[2].types)
companys.value.forEach((item) => {
  item.companys = 0
  for (let i in item.classify) {
    if (item.classify[i] > 0) {
      item.companys += item.classify[i]
    }
  }
})
console.log(1111111111, companys.value)
const choseBar = (item) => {
  navbar.value = item.title
  companys.value = item.types
  companys.value.forEach((item) => {
    item.companys = 0
    for (let i in item.classify) {
      if (item.classify[i] > 0) {
        item.companys += item.classify[i]
      }
    }
  })
}
</script>

<template>
  <transition
    appear
    name="custom-classes-transition"
    enter-active-class="animate__animated animate__faster  animate__fadeInUp"
    leave-active-class="animate__animated animate__faster animate__fadeOutUp"
  >
    <div class="card">
      <CommonTitle title="产业概况" />
      <div class="navbox">
        <p
          v-for="(item, index) in navList"
          :key="index"
          @click="choseBar(item)"
          :class="{ active: navbar == item.title }"
        >
          {{ item.title }}
        </p>
      </div>
      <div class="content">
        <ul>
          <li
            v-for="(item, index) in companys"
            :key="index"
            v-show="
              !(Object.values(item.classify).length == 1 && Object.values(item.classify)[0] == 0)
            "
          >
            <div>{{ item.type }}</div>
            <div>
              <p>
                <span
                  v-for="(v, k) in item.classify"
                  :key="k"
                  v-show="v > 0"
                  :style="{ width: (v / item.companys) * 100 + '%' }"
                >
                  <el-tooltip effect="dark" :content="`${k} : ${v} 家`" placement="top">
                    {{ k }}:{{ v }}家
                  </el-tooltip>
                </span>
              </p>
              <p>
                <span
                  v-for="(v, k) in item.classify"
                  :key="k"
                  v-show="v > 0"
                  :style="{ width: (v / item.companys) * 100 + '%' }"
                ></span>
              </p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </transition>
</template>

<style lang="scss" scoped>
.card {
  position: absolute;
  bottom: 30px;
  left: 630px;
  right: 490px;
  height: 337px;
  background: #090e18;

  :deep() {
    .titbox {
      width: 380px;
    }
  }

  .navbox {
    display: flex;
    margin: 5px 20px;

    p {
      flex: 1;
      height: 32px;
      text-align: center;
      line-height: 32px;
      color: #85b9cb;
      cursor: pointer;
      background: url('@img/industry/nochose.png');
      background-size: 100% 100%;

      &.active {
        color: #fff;
        background: url('@img/industry/chosed.png');
        background-size: 100% 100%;
      }
    }
  }

  .content {
    padding: 0 10px;
    margin-top: 15px;
    li {
      display: flex;
      height: 54px;
      margin: 10px;
      align-items: center;

      div:first-child {
        flex: 0 0 100px;
      }

      div:last-child {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        padding: 0 10px;
        background: rgba(86, 88, 96, 0.2);
        border-top: 1px dashed rgba(167, 177, 187, 0.2);
        border-bottom: 1px dashed rgba(167, 177, 187, 0.2);

        p:first-child {
          display: flex;

          span {
            padding-right: 10px;
            font-size: 12px;
            white-space: nowrap; /* 不允许换行 */
            overflow: hidden; /* 隐藏超出容器的内容 */
            text-overflow: ellipsis; /* 超出部分显示省略号 */

            &:nth-child(1) {
              color: #58b0ff;
            }

            &:nth-child(2) {
              color: #d3cc94;
            }

            &:nth-child(3) {
              color: #7ae3e5;
            }

            &:nth-child(4) {
              color: #88eec0;
            }
          }
        }

        p:last-child {
          display: flex;
          span {
            // flex: 1;
            height: 12px;

            &:nth-child(1) {
              background: linear-gradient(
                to left,
                rgba(88, 176, 255, 0.15) 0%,
                #58b0ff 99%,
                #2fe2ff 100%
              );
              border: 1px solid #58b0ff;
            }

            &:nth-child(2) {
              background: linear-gradient(
                to left,
                rgba(211, 204, 148, 0.15) 0%,
                #d3cc94 100%,
                #2fe2ff 100%
              );
              border: 1px solid #d3cc94;
            }

            &:nth-child(3) {
              background: linear-gradient(
                to left,
                rgba(122, 227, 229, 0.15) 0%,
                #7ae3e5 100%,
                #2fe2ff 100%
              );
              border: 1px solid #7ae3e5;
            }

            &:nth-child(4) {
              background: linear-gradient(
                to left,
                rgba(136, 238, 192, 0.15) 0%,
                #88eec0 100%,
                #2fe2ff 100%
              );
              border: 1px solid #88eec0;
            }
          }
        }
      }
    }
  }
}
</style>
